<template>
	<view class="countTime" style="display: flex;align-items: center;justify-content: center;">
		<view v-if="timeArr[3]">
			<text :style="{background: bg,color:fontColor}" class="isTimeNum">{{ timeArr[3] }}</text>:
		</view>
		<view v-if="timeArr[2]">
			<text :style="{background: bg,color:fontColor}" class="isTimeNum">{{ timeArr[2] }}</text>:
		</view>
		<view v-if="timeArr[1]">
			<text :style="{background: bg,color:fontColor}" class="isTimeNum">{{ timeArr[1] }}</text>:
		</view>
		<view v-if="timeArr[0]">
			<text :style="{background: bg,color:fontColor}" class="isTimeNum">{{ timeArr[0] }}</text>
		</view>
	</view>
</template>

<script>
export default {
	name:"countTime",
	props:{
		bg:{
			type:String,
			default:'#00000020'
		},
		fontColor:{
			type:String,
			default:'#ffffff'
		},
		countTime:{
			type:Number,
			default:0
		}
	},
	data() {
		return {
			nowTime:'',
			timeArr:['0','0','0']
		};
	},
	mounted() {
		console.log('created');
		this.nowTime = JSON.parse(JSON.stringify(this.countTime));
		console.log('this.nowTime-----------', this.nowTime)
		this.getTimeArr();
	},
	beforeDestroy(){
		console.log('beforeDestroy');
		clearInterval(this.timer);
		this.timer = '';
	},
	methods:{
		    formatDuring( second_time ){
		      second_time = (second_time - new Date().getTime()) / 1000;
		      // this.triggerEvent('timeFinish');
		      if(!second_time || parseInt(second_time ) < 0) {
		        if(parseInt(second_time ) <= 0) {
					// 倒计时完成
					clearInterval(this.timer);
					this.timer = '';
					this.$emit('timeFinish');
				}
		        return '';
		      }
		      var sec = parseInt(second_time) % 60;
		      var time = [sec];
		      if( parseInt(second_time )> 60){
		          var min = parseInt(second_time / 60);
		          time =[this.addZero(sec),this.addZero(min)];
		          if( min > 60 ){
		              min = parseInt(second_time / 60) % 60;
		              var hour = parseInt( parseInt(second_time / 60) /60 );
		              time = [this.addZero(sec),this.addZero(min),this.addZero(hour)];
		              if( hour > 24 ){
		                  hour = parseInt( parseInt(second_time / 60) /60 ) % 24;
		                  var day = parseInt( parseInt( parseInt(second_time / 60) /60 ) / 24 );
		                  time = [this.addZero(sec),this.addZero(min),this.addZero(hour),this.addZero(day)];
		              }
		          }
		      }
		      // console.log('time',time);
		      return time;
		    },
		    addZero(num){
		      return num < 10 ? `0${num}` : num;
		    },
		    getTimeArr(){
				console.log('this.formatDuring--------', this.nowTime)
				let nowArr = this.formatDuring(this.nowTime);
				console.log('this.formatDuring--------222', nowArr)
				this.timeArr = nowArr;
				clearInterval(this.timer);
				this.timer = setInterval(()=>{
				//   console.log('this.timeArr',this.timeArr);
				this.timeArr = this.formatDuring(this.nowTime)
		      },1000)
		    }
	}
}
</script>

<style>
.isTimeNum {
	padding: 4rpx;
	border-radius: 6rpx;
	color: #FFFFFF;
	font-size: 28rpx;
	margin-left: 5rpx;
	margin-right: 5rpx;
}
</style>
